<template>
    <div 
      class="notification-item"
      :class="{ 'unread': !notification.isRead }"
      @click="handleClick"
    >
      <!-- 通知发送者头像 -->
      <div class="notification-avatar">
        <img 
          :src="notification.sender.avatar" 
          alt="Sender Avatar"
        >
      </div>
  
      <!-- 通知内容区域 -->
      <div class="notification-content">
        <!-- 标题/主要内容 -->
        <div class="notification-title">
          <span class="sender-name">{{ notification.sender.username }}</span> 
          {{ notification.content }}
        </div>
        <!-- 时间 & 额外操作（可选） -->
        <div class="notification-meta">
          <span class="time">{{ formatTime(notification.createdAt) }}</span>
          <button 
            v-if="!notification.isRead" 
            class="mark-read-btn"
            @click.stop="markAsRead"
          >
            标记为已读
          </button>
        </div>
      </div>
  
      <!-- 通知类型图标（可选，根据通知类型展示不同图标） -->
      <div class="notification-icon">
        <i 
          :class="getNotificationIcon" 
          :style="{ color: iconColor }"
        ></i>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { formatDistanceToNow } from 'date-fns';
  import { useNotificationStore } from '@/store/modules/notification'; // 假设通知相关 store 路径
  
  const props = defineProps({
    notification: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        sender: {
          id: '',
          username: '',
          avatar: ''
        },
        content: '',
        type: 'like', // 可选值：like, comment, follow, system 等
        createdAt: new Date(),
        isRead: false
      })
    }
  });
  
  const notificationStore = useNotificationStore();
  
  // 格式化时间为相对时间（如 "5 分钟前"）
  const formatTime = (date) => {
    return formatDistanceToNow(new Date(date), { addSuffix: true });
  };
  
  // 根据通知类型返回图标
  const getNotificationIcon = computed(() => {
    const typeMap = {
      like: 'fas fa-heart',
      comment: 'fas fa-comment',
      follow: 'fas fa-user-plus',
      system: 'fas fa-bell'
    };
    return typeMap[props.notification.type] || 'fas fa-bell';
  });
  
  // 图标颜色（未读时高亮）
  const iconColor = computed(() => {
    return props.notification.isRead ? '#999' : '#ff4d4f';
  });
  
  // 点击通知事件（可跳转至对应页面，如帖子详情、用户主页等）
  const handleClick = () => {
    // 根据通知类型处理跳转逻辑
    switch (props.notification.type) {
      case 'like':
      case 'comment':
        // 假设通知内容里有 postId，可跳转至帖子详情
        // router.push({ name: 'PostDetail', params: { id: props.notification.postId } });
        break;
      case 'follow':
        // 跳转至关注者主页
        // router.push({ name: 'Profile', params: { id: props.notification.sender.id } });
        break;
      default:
        break;
    }
    // 点击后自动标记为已读（可选逻辑，也可放单独按钮里）
    if (!props.notification.isRead) {
      markAsRead();
    }
  };
  
  // 标记为已读
  const markAsRead = () => {
    notificationStore.markNotificationAsRead(props.notification.id);
    // 也可直接修改本地状态（需确保和 store 同步）
    // props.notification.isRead = true;
  };
  </script>
  
  <style scoped>
  .notification-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .notification-item:hover {
    background-color: #fafafa;
  }
  
  /* 未读状态样式 */
  .notification-item.unread {
    background-color: #fff9f5;
  }
  
  .notification-avatar {
    min-width: 40px;
    margin-right: 12px;
  }
  
  .notification-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .notification-title {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
  }
  
  .sender-name {
    font-weight: 600;
    margin-right: 4px;
  }
  
  .notification-meta {
    display: flex;
    align-items: center;
    margin-top: 4px;
    color: #999;
    font-size: 12px;
  }
  
  .time {
    margin-right: 12px;
  }
  
  .mark-read-btn {
    background-color: #ff4d4f;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .notification-icon {
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 16px;
  }
  </style>